import React, { Component, Suspense } from "react";
import { connect } from "dva";
import EditingKnowledge from "@/pages/KnowledgeManagement/Overview/EditingKnowledge/editingKnowledge";
import { FormattedMessage } from "umi-plugin-react/locale";
import { Form, Button, Modal, Icon, Spin, Card, Pagination, Drawer, Row, Col } from "antd";
import styles from "./index.less";
import noData from "@/assets/icons/暂无数据.png";
import { getKeywordByModelId } from '@/services/basiccapacity';
import UserSession from "@/UserSession";
const FormItem = Form.Item;
export class Service extends Component {
	state = {
		total: 0,
		page: 1,
		pageSize: 10,
		id: "",
		pdx: 0,
		thesaurusList: [],
		KeywordList: [],
		colorName: null,
		serviceData: {},
		slotQaList: [],
		QaList: [],
		close: false,
		qaId: "",
		vueIf: false,
		vueIfG: false,
		vueIfA: false,
		vueIfB: false,
		questions: [],
	};

	componentDidMount() {
		console.log(this.props);
		const { urlPrefix } = this.props;
		if (this.props.type === "custom") {
			console.log("实体管理");
			this.setState({ page: 1, id: this.props.item.id, vueIf: true }, () => {
				this.being();
				this.getKeywordByModel();
			});
		} else {
			console.log("词槽管理");
			let data = this.props.item;
			data.nameKey = `<${data.name}>-${data.keyName}`;
			this.setState({ page: 1, serviceData: data, id: this.props.item.id, vueIf: false }, () => {
				this.beingTwo();
			});
		}
	}

	being = () => {
		const { dispatch, currentUser, urlPrefix } = this.props;
		const { id } = this.state;
		this.reqRef = requestAnimationFrame(() => {
			dispatch({
				type: "service/basicDictSlotList",
				payload: { id, current: 1, size: 99999, urlPrefix },
				callback: (res) => {
					console.log(res);
					let data = res.records;
					data.map((item, index) => {
						item.nameKey = `<${item.name}>-${item.keyName}`;
					});
					if (data.length) {
						this.setState(
							{
								thesaurusList: data,
								serviceData: data[0],
							},
							() => {
								// this.basicSlotDialogList(data[0].id);
								// this.basicSlotQaList(data[0].id);
							}
						);
						console.log("主页增加内容", res);
					}
				},
			});
		});
	};

	getKeywordByModel = async () => {
		const { urlPrefix } = this.props;
		const { id } = this.state;
		let res = await getKeywordByModelId({ modelId: id, current: 1, size: 99999, urlPrefix });
		console.log(res);
		this.setState({ KeywordList: res.records })
	};

	beingTwo = () => {
		const { dispatch, currentUser } = this.props;
		const { id } = this.state;
		this.reqRef = requestAnimationFrame(() => {
			this.basicSlotDialogList(id);
			this.basicSlotQaList(id);
		});
	};

	// 多轮列表
	basicSlotDialogList = (id) => {
		const { dispatch, currentUser, urlPrefix } = this.props;
		this.reqRef = requestAnimationFrame(() => {
			dispatch({
				type: "service/basicSlotDialogList",
				payload: { id, current: 1, size: 99999, urlPrefix },
				callback: (res) => {
					console.log(res);
					let data = res.records;
					if (data.length) {
						this.setState({ vueIfA: true }, () => {
							console.log("多轮列表", data);
							this.setState({
								slotQaList: data,
							});
						});
					} else {
						this.setState({ vueIfA: false });
					}
				},
			});
		});
	};

	// 词槽使用中的知识点列表
	basicSlotQaList = (id) => {
		const { dispatch, currentUser, urlPrefix } = this.props;
		const { page, pageSize } = this.state;
		this.reqRef = requestAnimationFrame(() => {
			dispatch({
				type: "service/basicSlotQaList",
				payload: { id, current: page, size: pageSize, urlPrefix },
				callback: (res) => {
					console.log(res);
					let data = res.records;
					if (data.length) {
						this.setState({ vueIfB: true }, () => {
							console.log("词槽使用中的知识点列表", res);
							this.setState({
								QaList: data,
								total: parseInt(res.total),
								// serviceData:data[0]
							});
						});
					} else {
						this.setState({ vueIfB: false });
					}
				},
			});
		});
	};

	showRev = (a, b) => {
		//  console.log(a,b)
		this.setState({ colorName: b });
	};

	showRevS = (a, b) => {
		// console.log(a,b)
		this.setState({ colorName: null });
	};

	handleDeletes = (e, index) => {
		console.log(e, index);
		this.setState({ pdx: index, serviceData: e }, () => {
			this.basicSlotDialogList(e.id);
			this.basicSlotQaList(e.id);
		});
	};

	onChangeB = (a) => {
		this.setState({ page: a }, () => {
			this.basicSlotQaList(this.state.serviceData.id);
		});
	};

	onShowSizeChangeB = (a, b) => {
		this.setState({ page: a, pageSize: b }, () => {
			this.basicSlotQaList(this.state.serviceData.id);
		});
	};

	// 新增
	addhandleOpen = (row) => {
		console.log(row);
		this.EditingKnowledge.showEditDrawer(row, null, null);
	};

	onClose = () => {
		this.setState({
			close: false,
			// isUpdate: true
		});
	};

	refreshList = () => {
		const { serviceData } = this.state;
		this.basicSlotQaList(serviceData.id);
	};

	render() {
		return (
			<div>
				{this.state.vueIf ? (
					<div className='cardxbj'>
						<div className={styles.flexA}>
							<div style={{ width: 4, height: 14, background: "#3f4959", marginRight: 19 }}></div>
							<span style={{ color: "#3f4959" }}>正在使用该实体的词槽</span>
						</div>
						<Card bordered={false} style={{ borderBottom: "1px dashed #dddddd" }}>
							{this.state.thesaurusList.map((item, index) => {
								let a = "rgba(0, 0, 0, 0.65)";
								let padding = {
									cursor: "pointer",
									padding: "7px 12px",
									border: "1px solid #d6e0ff",
									color: a,
								};
								return (
									<span key={index} style={{ margin: "40px 0px" }}>
										<span
											onMouseOut={() => {
												this.showRevS(item, index);
											}}
											onMouseOver={() => {
												this.showRev(item, index);
											}}
											onClick={() => {
												// this.handleDeletes(item, index);
											}}
											style={padding}
											className={styles.tag}
										>
											{`【${item.slotName}】`}
										</span>
									</span>
								);
							})}
						</Card>
					</div>
				) : null}
				{this.state.vueIf && !UserSession.isAdmin() ? (
					<div className='cardxbj'>
						<div className={styles.flexA}>
							<div style={{ width: 4, height: 14, background: "#3f4959", marginRight: 19 }}></div>
							<span style={{ color: "#3f4959" }}>正在使用该实体的关键词</span>
						</div>
						<Card bordered={false} style={{ borderBottom: "1px dashed #dddddd" }}>
							{this.state.KeywordList.map((item, index) => {
								let a = "rgba(0, 0, 0, 0.65)";
								let padding = {
									cursor: "pointer",
									padding: "7px 12px",
									border: "1px solid #d6e0ff",
									color: a,
								};
								return (
									<span key={index} style={{ margin: "40px 0px" }}>
										<span
											onMouseOut={() => {
												this.showRevS(item, index);
											}}
											onMouseOver={() => {
												this.showRev(item, index);
											}}
											onClick={() => {
												// this.handleDeletes(item, index);
											}}
											style={padding}
											className={styles.tag}
										>
											{`【${this.props.item.name}】`}
										</span>
									</span>
								);
							})}
						</Card>
					</div>
				) : null}

				{/* {this.state.vueIfA ? (
					<div className='cardxbj' style={{ marginTop: 24 }}>
						<div style={{ margin: "10px 0px" }} className={styles.flexA}>
							<div style={{ width: 4, height: 14, background: "#3f4959", marginRight: 19 }}></div>
							<span style={{ color: "#3f4959" }}>
								正在使用词槽{" "}
								<span style={{ padding: "7px 12px", border: "1px solid #d6e0ff" }} className={styles.tags}>
									{this.state.serviceData.nameKey}
								</span>
								的多轮会话
							</span>
						</div>
						<Card bordered={false} style={{ borderBottom: "1px dashed #dddddd" }}>
							{this.state.slotQaList.map((item, index) => {
								let padding = {
									cursor: "pointer",
									padding: "7px 12px",
									border: "1px solid #6bb8ff",
									background: "#f2faff",
									color: "#0079e8",
								};
								return (
									<span key={index} style={{ margin: "40px 0px" }}>
										<span style={padding} className={styles.tag}>{item.name}</span>
									</span>
								);
							})}
						</Card>
					</div>
				) : null} */}

				{this.state.vueIfB ? (
					<div className='cardxbj' style={{ marginTop: 24 }}>
						<div style={{ margin: "10px 0px" }} className={styles.flexA}>
							<div style={{ width: 4, height: 14, background: "#3f4959", marginRight: 19 }}></div>
							<span style={{ color: "#3f4959" }}>
								正在使用词槽{" "}
								<span style={{ padding: "7px 12px", border: "1px solid #d6e0ff" }} className={styles.tags}>
									{this.state.serviceData.nameKey}
								</span>
								的知识点
							</span>
						</div>
						<Card bordered={false}>
							{/* slotQaList */}
							{this.state.QaList.map((item, index) => {
								let padding = {
									cursor: "pointer",
									background: "#f8f9fe",
									color: "#333333",
								};
								return (
									<div key={index}>
										<Row style={{ lineHeight: '37px', marginBottom: 16 }}>
											<Col span={6}>
												<div>{item.type}</div>
											</Col>
											<Col span={18}>
												<div style={padding} className={styles.mag}>
													<div style={{ padding: "10px 20px" }}>{item.name}</div>
												</div>
											</Col>
										</Row>
									</div>
								);
							})}

							<Pagination
								style={{ float: "right" }}
								total={this.state.total}
								pageSize={this.state.pageSize} // 显示几条一页
								current={this.state.page} // 当前页
								showSizeChanger={true} // 是否显示可以设置几条一页的选项
								showQuickJumper={true}
								onChange={this.onChangeB}
								onShowSizeChange={this.onShowSizeChangeB}
							/>
						</Card>
					</div>
				) : null}

				<EditingKnowledge
					onRef={(ref) => (this.EditingKnowledge = ref)}
					refreshList={this.refreshList}
					categoryId={this.state.categoryId}
					authority={2}
					urlPrefix={this.props.urlPrefix ? this.props.urlPrefix : null}
				/>
			</div>
		);
	}
}

export default connect(({ user }) => ({
	// 全局数据
	currentUser: user.currentUser,
}))(Form.create()(Service));
